<template>
  <div class="app-container">
    <!--查询表单-->
    <div class="search-div" align="left">
      <el-form label-width="70px" size="medium">
        <el-row>
          <el-col :span="5">
            <el-form-item label="教师名称">
              <el-input style="width: 80%" v-model="searchObj.teacherName" placeholder="教师名称"></el-input>
            </el-form-item>
          </el-col>
          <el-button type="primary" icon="el-icon-search" size="medium" @click="fetchData()">搜索</el-button>
          <el-button icon="el-icon-refresh" size="medium" @click="resetData">重置</el-button>
          <el-button type="success" style="position: absolute;right: 20px" @click="add()" size="medium" :disabled="$hasBP('bnt.sysTea.add')  === false">添加教师</el-button>
          <el-button class="btn-add" icon="el-icon-delete" size="medium" @click="batchRemove()" :disabled="$hasBP('bnt.sysTea.remove')  === false">批量删除</el-button>
        </el-row>
      </el-form>
    </div>
    <br>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      @selection-change="handleSelectionChange">
      <el-table-column type="selection"/>

      <el-table-column align="center" label="序号" width="95">
              <template slot-scope="scope">
                {{ scope.$index +1}}
              </template>
            </el-table-column>
            <el-table-column label="姓名" align="center">
              <template slot-scope="scope">
                {{ scope.row.teaname }}
              </template>
            </el-table-column>
            <el-table-column label="性别" align="center">
              <template slot-scope="scope">
                {{ scope.row.teasex }}
              </template>
            </el-table-column>
            <el-table-column label="年龄" align="center">
              <template slot-scope="scope">
                {{ scope.row.teaage }}
              </template>
            </el-table-column>
            <el-table-column label="职位" align="center">
              <template slot-scope="scope">
                {{ scope.row.ptitle }}
              </template>
            </el-table-column>
            <el-table-column label="教授科目" align="center">
              <template slot-scope="scope">
                {{ scope.row.teaproject }}
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="edit(scope.row.teaid)" :disabled="$hasBP('bnt.sysTea.update')  === false">
                  编辑
                </el-button>
                <el-button size="mini" type="danger" @click="removeById(scope.row.teaid)" :disabled="$hasBP('bnt.sysTea.remove')  === false">
                  删除
                </el-button>
              </template>
            </el-table-column>
    </el-table>

    <div class="block" align="center">
      <el-pagination
        @current-change="fetchData"
        :current-page="page"
        :page-size="limit"
        layout="total, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

    <!--添加页面的弹框效果-->
    <el-dialog title="添加教师" :visible.sync="dialogVisible" width="40%" >
      <el-form ref="dataForm" :model="sysTeacher" label-width="150px" size="small" style="padding-right: 40px;">
        <el-form-item label="教师ID">
          <el-input v-model="sysTeacher.teaid" :disabled="true"/>
        </el-form-item>
        <el-form-item label="教师名称">
          <el-input v-model="sysTeacher.teaname"/>
        </el-form-item>
        <el-form-item label="性别">
          <el-input v-model="sysTeacher.teasex"/>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="sysTeacher.teaage"/>
        </el-form-item>
        <el-form-item label="职位">
          <el-input v-model="sysTeacher.ptitle"/>
        </el-form-item>
        <el-form-item label="教授科目">
          <el-input v-model="sysTeacher.teaproject"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small" icon="el-icon-refresh-right">取 消</el-button>
        <el-button type="primary" icon="el-icon-check" @click="saveOrUpdate()" size="small">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination/index' // secondary package based on el-pagination
import api from '@/api/system/teacher.js'

export default {
  components: { Pagination },
  data() {
    return {
      list: [],
      listLoading: true,
      total: 0,//记录的总条数
      page: 1,//当前是第几页
      limit: 10,//每页显示的数量
      searchObj:{},//条件查询封装对象
      sysTeacher:{},//封装添加表单的数据
      dialogVisible: false,//弹出框
      selectValue: []//复选框选择内容封装数组
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    //pageNum查询页数
    fetchData(pageNum=1){
      this.page = pageNum;
      api.getPageList(this.page,this.limit,this.searchObj)
          .then(response => {
            this.listLoading = false
            //每页数据列表
            this.list = response.data.records
            //总记录数
            this.total = response.data.total
          })
    },
    // 重置表单
    resetData() {
      //清空表单
      this.searchObj = {}
      //查询所有数据
      this.fetchData()
    },
    edit(id){
      //弹框
      this.dialogVisible = true
      api.getTeacherById(id).then(response => {
        this.sysTeacher = response.data
      })
    },
    removeById(id){
      //======弹框======
      this.$confirm('此操作将永久删除该教师, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //调用删除方法
        api.removeById(id)
          .then(response => {
            //提示
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            //刷新页面
            this.fetchData()
          })
      })
    },
    //点击添加，弹出框
    add(){
      this.dialogVisible = true
      this.sysTeacher = {}
    },
    //添加教师方法
    saveTeacher(){
      api.saveTeacher(this.sysTeacher)
        .then(response => {
          //提示
          this.$message({
            type: 'success',
            message: '添加成功!'
          });
          //关闭弹框
          this.dialogVisible = false
          //刷新页面
          this.fetchData()
        })
    },
    //点击确定添加或修改
    saveOrUpdate(){
      //判断添加还是修改
      if (!this.sysTeacher.teaid){
        //添加
        this.saveTeacher()
      }else {
        this.updateTeacher()
      }
    },
    //修改方法
    updateTeacher(){
      api.update(this.sysTeacher)
          .then(response => {
            //提示
            this.$message({
              type: 'success',
              message: '添加成功!'
            });
            //关闭弹框
            this.dialogVisible = false
            //刷新页面
            this.fetchData()
          })
    },

    handleSelectionChange(selection){
      this.selectValue = selection
    },
    //批量删除
    batchRemove(){
      //判断
      if (this.selectValue.length == 0){
        this.$message({
          type: 'warning',
          message: '请选择要删除的记录！'
        });
        return
      }
      //======弹框======
      this.$confirm('此操作将永久删除该些教师, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var idList = []
        //获取多个复选框的id值
        for (var i=0;i<this.selectValue.length;i++){
          var obj = this.selectValue[i];
          //id值
          var id = obj.teaid
          idList.push(id)
        }
        //调用删除方法
        api.batchRemoveById(idList)
          .then(response => {
            //提示
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            //关闭弹框
            this.dialogVisible = false
            //刷新页面
            this.fetchData()
          })
      })
    }
  }
}
</script>
